<head><meta charset=utf-8><meta name="viewport" content="user-scalable=no,initial-scale=1,maximum-scale=1">
<style>
body { margin: 0px; }
canvas { width:100%; height:100%; overflow: hidden; }
</style>
<script type="text/javascript" src="../h3du_min.js"></script>
<script type="text/javascript" src="demoutil.js"></script>
<script type="text/javascript" src="../extras/meshjson.js"></script>
</head>
<body>
<canvas id=canvas></canvas>
<script id="demo">
/* global H3DU */
// <!--
/*
 Any copyright to this file is released to the Public Domain.
 http://creativecommons.org/publicdomain/zero/1.0/
 If you like this, you should donate
 to Peter O. (original author of
 the Public Domain HTML 3D Library) at:
 http://peteroupc.github.io/
*/

function TriangleParticles(scene, count, w, h) {
  "use strict";
  this.tris = [];
  this.group = new H3DU.ShapeGroup();
  this.width = w;
  this.scene = scene;
  this.timer = {};
  this.height = h;
  for(var i = 0; i < count; i++) {
    var tri = TriangleParticles.generateTri(this.width, this.height);
    this.tris.push(tri);
    this.group.addShape(
    TriangleParticles.makeShapeFromTri(tri, scene));
  }
  this.scene.addShape(this.group);
}
TriangleParticles.prototype.update = function(time) {
  "use strict";
  var frames = H3DU.newFrames(this.timer, time);
  for(var i = 0; i < this.tris.length; i++) {
    this.tris[i].life -= frames;
    if(this.tris[i].life <= 0) {
      var tri = TriangleParticles.generateTri(this.width, this.height);
      this.tris[i] = tri;
      this.group.setShape(i, TriangleParticles.makeShapeFromTri(tri, this.scene));
    } else {
      var trans = this.group.getShape(i).getTransform();
      trans.movePosition(H3DU.Math.vec3scale(this.tris[i].movement, frames));
      trans.multRotation(this.tris[i].rotation * frames, 0, 0, 1);
    }
  }
};
TriangleParticles.makeShapeFromTri = function(tri) {
  "use strict";
  var sh = new H3DU.Shape(new H3DU.Mesh()
   .mode(H3DU.Mesh.TRIANGLES)
   .normal3(0, 0, 1)
   .vertex3(tri.position[0], tri.position[1], tri.position[2])
   .vertex3(tri.position[3], tri.position[4], tri.position[5])
   .vertex3(tri.position[6], tri.position[7], tri.position[8]))
   .setMaterial(H3DU.Material.fromBasic(tri.color));
  sh.getTransform().setPosition(
  tri.center[0], tri.center[1], tri.center[2]
 );
  return sh;
};

// Calculates the area of a triangle
TriangleParticles._getArea = function(tri) {
  "use strict";
  var tx = [tri[0] - tri[3], tri[1] - tri[4], tri[2] - tri[5]];
  var ty = [tri[6] - tri[3], tri[7] - tri[4], tri[8] - tri[5]];
  var tz = H3DU.Math.vec3cross(tx, ty);
  return H3DU.Math.vec3length(tz) * 0.5;
};

TriangleParticles.generateTri = function(width, height) {
  "use strict";
  var xpos = Math.random() * (width + 10) - 5;
  var ypos = Math.random() * (height + 10) - 5;
  var maxw = 100;
  var maxh = 100;
  var pos;
  do {
    pos = [
      Math.random() * maxw - maxw / 2,
      Math.random() * maxh - maxh / 2,
      0,
      Math.random() * maxw - maxw / 2,
      Math.random() * maxh - maxh / 2,
      0,
      Math.random() * maxw - maxw / 2,
      Math.random() * maxh - maxh / 2,
      0];
  } while(TriangleParticles._getArea(pos) < 200);
  var dx = Math.random() * 10 - 5;
  var dy = Math.random() * 10 - 5;
  var rotation = Math.floor(Math.random() * 10) - 5;
  var life = Math.floor(Math.random() * 200);
  var r = Math.random();
  var g = Math.random();
  var b = Math.random();
  return {
    "center":[xpos, ypos, 0],
    "position":pos,
    "rotation":rotation,
    "movement":[dx, dy, 0],
    "color":[r, g, b],
    "life":life
  };
};

  // Create the 3D scene; find the HTML canvas and pass it
  // to Scene3D.
var scene = new H3DU.Scene3D(document.getElementById("canvas"))
   .setClearColor("white");
var sub = new H3DU.Batch3D();
sub.getLights().setBasic();
var tris = new TriangleParticles(sub, 200, scene.getWidth(), scene.getHeight());
  // Set up the render loop
H3DU.renderLoop(function(time) {
  "use strict";
  sub.ortho2DAspect(0, scene.getWidth(), scene.getHeight(), 0);
  tris.update(time);
   // Render the scene
  scene.render(sub);
});
// -->
</script>
</body>
